<template>
  <div class="audit">
    <h3>审核管理</h3>
    <div class="auditInner">
      <div class="select">
        <el-select v-model="valueSheng" placeholder="请选择省份" @change="changeSheng">
          <el-option
            v-for="item in provinces"
            :key="item.id"
            :label="item.province"
            :value="item.provinceid"
          ></el-option>
        </el-select>
        <el-select v-model="valueShi" placeholder="请选择城市" @change="changeShi">
          <el-option
            v-for="item in citys"
            :key="item.cityid"
            :label="item.city"
            :value="item.cityid"
          ></el-option>
        </el-select>
        <el-select v-model="valueXian" placeholder="请选择区县" @change="changeXian">
          <el-option v-for="(item, i) in areas" :key="i" :label="item.area" :value="item.areaid"></el-option>
        </el-select>
      </div>
      <div class="search">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="小区名称" width="200">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.Villagename }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" width="230">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="面积" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.area }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总价" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.state }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="audit(scope.$index, scope.row)">审核</el-button>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <div class="mask" v-show="maskShow">
      <div class="maskInner">
        <h3>编辑</h3>
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="小区名称" prop="pass">
            <el-input type="text" v-model="ruleForm.Villagename" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标题" prop="checkPass">
            <el-input type="text" v-model="ruleForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="面积" prop="age">
            <el-input v-model="ruleForm.area"></el-input>
          </el-form-item>
          <el-form-item label="总价" prop="checkPass">
            <el-input type="text" v-model="ruleForm.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="checkPass">
            <el-input type="text" v-model="ruleForm.sort" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="checkPass">
            <el-input type="text" v-model="ruleForm.state" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [], //省
      citys: [],
      areas: [],
      valueSheng: "",
      valueShi: "",
      valueXian: "",
      idSheng: "",
      idShi: "",
      idXian: "",
      input: "",
      tableData: [],
      pageIndex: 1,
      pageSize: 5,
      currentPage4: 1,
      total: null,
      maskShow: false,
      ruleForm: {
        Villagename: "",
        title: "",
        area: "",
        price: "",
        sort: "",
        state: "",
        rowId: null
      }
    };
  },
  methods: {
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList(this.pageIndex, this.pageSize);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getList(this.pageIndex, this.pageSize);
    },
    //表格操作
    //审核
    audit(index, row) {
      console.log(index, row);
      this.$http
        .post("/api/audit", {
          id: row.id
        })
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.getList(this.pageIndex, this.pageSize);
          }
        });
    },
    //编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.rowId = row.id;
      this.maskShow = true;
      this.$http
        .post("/api/backLook", {
          id: row.id
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 1) {
            this.ruleForm = {
              Villagename: res.data.data[0].Villagename,
              title: res.data.data[0].title,
              area: res.data.data[0].area,
              price: res.data.data[0].price,
              sort: res.data.data[0].sort,
              state: res.data.data[0].state
            };
          }
        });
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      this.$http
        .post("/api/handleDelete", {
          id: row.id
        })
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.getList(this.pageIndex, this.pageSize);
          }
        });
    },
    //提交
    submitForm() {
      console.log(1);
      this.$http
        .post("/api/handleEdit", {
          id: this.rowId,
          Villagename: this.ruleForm.Villagename,
          title: this.ruleForm.title,
          area: this.ruleForm.area,
          price: this.ruleForm.price,
          sort: this.ruleForm.sort,
          state: this.ruleForm.state
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 1) {
            this.$message.success(res.data.message);
            this.maskShow = false;
            this.ruleForm = {
              Villagename: "",
              title: "",
              area: "",
              price: "",
              sort: "",
              state: "",
              rowId: null
            };
            this.getList(this.pageIndex, this.pageSize);
          }
        });
    },
    resetForm() {
      this.maskShow = false;
      this.ruleForm = {
        Villagename: "",
        title: "",
        area: "",
        price: "",
        sort: "",
        state: "",
        rowId: null
      };
    },
    //选择省
    changeSheng(value) {
      this.idSheng = value;
      console.log("省级ID", this.idSheng);
      //请求市级数据
      this.$http
        .post("/api/shi", {
          provinceid: value
        })
        .then(res => {
          if (res.data.code === 1) {
            this.citys = res.data.data;
          }
        });
    },
    //选择城市
    changeShi(value) {
      console.log(value);
      this.idShi = value;
      console.log("市级ID", this.idXian);
      //请求县级数据
      this.$http
        .post("/api/xian", {
          cityid: value
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 1) {
            this.areas = res.data.data;
          }
        });
    },
    //选择县区
    changeXian(value) {
      console.log(value);
      this.idXian = value;
    },
    //搜索
    search() {
      console.log(this.input);
      this.$http
        .post("/api/searchVal", {
          keyword: this.input
        })
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.tableData = res.data.data;
          }
        });
    },
    //获取数据
    getshen() {
      this.$http.get("/api/sheng").then(res => {
        if (res.data.code === 1) {
          this.provinces = res.data.data;
        }
      });
    },
    //获取table数据
    getList(pageIndex, pageSize) {
      this.$http
        .get(`/api/getData?pageIndex=${pageIndex}&pageSize=${pageSize}`)
        .then(res => {
          console.log(res);
          if (res.data.code === 1) {
            this.tableData = res.data.data;
            this.total = res.data.total;
          }
        });
    }
  },
  created() {
    this.getshen();
    this.getList(this.pageIndex, this.pageSize);
  }
};
</script>

<style scoped lang='scss'>
.audit {
  width: 100%;
  height: 100%;
}

.auditInner {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  // margin: 20px 0;
  .search {
    display: flex;
    padding-left: 20px;
    align-items: center;
  }
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .maskInner {
    width: 700px;
    height: 500px;
    background: white;
    text-align: center;
    padding: 10px;
    h3 {
      height: 60px;
      line-height: 60px;
      font-size: 25px;
    }
  }
}
.el-form-item__content .el-input{
  width: 550px;
}
.el-form-item__content button{
  margin: 5px 45px;
  width: 180px;
}
</style>